<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
  <head>
    <title>OpenLayers: Popup Mayhem</title>
    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 900px;
            height: 500px;
            border: 1px solid black;
        }
    </style>

    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        var layer, markers;
        
        var currentPopup;
        
        
// different popup types


        //disable the autosize for the purpose of our matrix
        OpenLayers.Popup.FramedCloud.prototype.autoSize = false;

        AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true
        });

        function init(){
            map = new OpenLayers.Map('map');

            layer = new OpenLayers.Layer(
                "popupMatrix", 
                {isBaseLayer: true}
            );
            map.addLayer(layer);

            markers = new OpenLayers.Layer.Markers("zibo");
            map.addLayer(markers);

            addMarkers();
            map.zoomToMaxExtent();
        }
        
        function addMarkers() {

            var ll, popupClass, popupContentHTML;

            //anchored bubble popup small contents autosize closebox
            ll = new OpenLayers.LonLat(-35,-15);
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = "<div>This text's line-height is affected<br/>by it's parents. Thus we have to<br/>place the content inside<br/>the correct container to get<br/>the rendered size.</div>";
            addMarker(ll, popupClass, popupContentHTML, true);
 

        }

        /**
         * Function: addMarker
         * Add a new marker to the markers layer given the following lonlat, 
         *     popupClass, and popup contents HTML. Also allow specifying 
         *     whether or not to give the popup a close box.
         * 
         * Parameters:
         * ll - {<OpenLayers.LonLat>} Where to place the marker
         * popupClass - {<OpenLayers.Class>} Which class of popup to bring up 
         *     when the marker is clicked.
         * popupContentHTML - {String} What to put in the popup
         * closeBox - {Boolean} Should popup have a close box?
         * overflow - {Boolean} Let the popup overflow scrollbars?
         */
        function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
        }

    </script>
  </head>
  <body onload="init()">
  <h1 id="title">Popup Matrix</h1>

  <div id="tags">
  </div>
      <div style="line-height: 40px;">
           <div id="map" class="smallmap"></div>
      </div>
      Click on popup, should be able to read a full sentence, not just two lines.  
   </div>
  </body>
</html>
